<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/animate.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body class="searchpage">

		<div>

			<div class="searchbar">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
				<div class="search-bar">
					<input class="kw" placeholder="" value="月饼" id="kw" type="search" style="margin: 0;text-align: left;" />
					<img src="../imgs/search.png" onclick="doSearch()" />
				</div>
			</div>

			<div id="hotkey-wrap" style="height: 100%;padding: 20px;">

			</div>

			<div id="result-wrap" style="display: none;">
				<div id="listview">

				</div>
			</div>

			<!--返回顶部-->
			<span class="totop hide mui-icon mui-icon mui-icon-arrowup" id="totop" onclick="scrolltotop()"></span>
		</div>
		<!--热搜关键词模板-->
		<script type="text/template" id="hotkeyTpl">

			<div class="kwlistview">
				{{each hotkey item idx}}
				<div class="kwitem" onclick="keysearch('{{item.keyword}}')">{{item.keyword}}</div>
				{{/each}}
			</div>

		</script>

		<!--商品列表模板-->
		<script type="text/html" id='goodsTpl'>
			{{each goodslist item idx}}
			<div class="goods-item {{idx%2==1?'right':''}}" data-idx='{{(pageIdx-1)*50+idx}}' onclick="goodsTap(this)">
				<img class="lazy" data-src="{{item.itempic}}_310x310.jpg" />
				<span class="title mui-ellipsis">{{item.itemtitle}}</span>
				<div class="price-wrap">
					<div class="itemendprice">￥{{item.itemendprice}}</div>
					<div class="itemprice">￥{{item.itemprice}}</div>
					<div class="itemsale">销量{{item.itemsale}}</div>
				</div>
			</div>
			{{/each}}
		</script>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/zepto113.js"></script>
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script type="text/javascript" src="../js/lazyload.js"></script>
		<script type="text/javascript" src="../js/api.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: "#listview", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#FE413F', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '50px', //可选,默认50px.下拉刷新控件的高度,
						range: '100px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '50px', //可选 默认0px,下拉刷新控件的起始位置
						auto: false, //可选,默认false.首次加载自动上拉刷新一次
						callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							var hotkey_display = $("#hotkey-wrap").css("display")
							if (hotkey_display == "block") {
								mui('#listview').pullRefresh().endPulldown();
								return
							}

							min_id = 1;
							tb_p = 1;
							search()
						}
					},
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							var hotkey_display = $("#hotkey-wrap").css("display")
							if (hotkey_display == "block") {
								return
							}
							search();
						}
					}
				},
				beforeback: function() {
					var hotkey_display = $("#hotkey-wrap").css("display")
					if (hotkey_display == "none") {
						$("#hotkey-wrap").css("display", "block")
						$("#result-wrap").css("display", "none")
						goodslist = [];
						$("#listview").html("");
						return false;
					}
					return true
				}
			})
			var hotkey = []
			mui.plusReady(function() {
				hotkey = JSON.parse(plus.storage.getItem("hotkey"))
				$(".kw").val(hotkey[0]["keyword"])

				var html = template('hotkeyTpl', {
					hotkey: hotkey.slice(0, 20),
				})
				$("#hotkey-wrap").html(html)

			})

			function doSearch() {
				$("#hotkey-wrap").css("display", "none")
				$("#result-wrap").css("display", "block")
				var kw = $(".kw").val()
				if (!kw) {
					plus.nativeUI.toast("请输入关键词")
					return
				}
				scrolltotop()
				min_id = 1;
				tb_p = 1;
				search()

			}

			//热搜关键词点击
			function keysearch(key) {
				$("#hotkey-wrap").css("display", "none")
				$("#result-wrap").css("display", "block")
				scrolltotop()
				min_id = 1;
				tb_p = 1;
				$(".kw").val(key)
				search()
			}

			//搜索接口
			var min_id = 1;
			var tb_p = 1;
			var nomore = false;
			var pageCount = 50;
			var goodslist = []
			var pageIdx = 1

			function search() {
				var kw = $(".kw").val()
				var params = {
					keyword: kw,
					back: pageCount,
					min_id: min_id,
					tb_p: tb_p
				}

				api.superSearch(params, function(res) {
					if (res.code == 1) {

						var list = res['data']
						nomore = list.length < pageCount

						if (min_id == 1) {
							goodslist = []
							pageIdx = 1
						} else {
							pageIdx++
						}
						goodslist = goodslist.concat(list)

						var html = template('goodsTpl', {
							goodslist: list,
							pageIdx: pageIdx
						})

						if (pageIdx == 1) {
							$('#listview').html(html)

						} else if (pageIdx > 1 && list.length > 0) {

							$('#listview').append(html)

						}

						min_id = res['min_id']
						tb_p = res['tb_p']

						myLazyLoad.update()
					}

				})

				if (pageIdx == 1 && mui('#listview').pullRefresh()) {
					mui('#listview').pullRefresh().endPulldown();
				}
				if (mui('#listview').pullRefresh()) {
					mui('#listview').pullRefresh().endPullupToRefresh(nomore);
				}

			}

			//关键词输入框监听 软键盘搜索
			document.getElementById("kw").addEventListener("keypress", function(event) {
				if (event.keyCode == "13") {
					document.activeElement.blur();
					doSearch()
				}
			});

			//跳转到商品详情
			function goodsTap(e) {
				var idx = e.dataset['idx']
				if (goodslist[idx] && window.plus) {
					mui.openWindow({
						url: 'detail.html',
						id: 'detail',

						styles: {
							popGesture: "close"
						},
						extras: {
							goods: goodslist[idx]
						}
					})
				} else {
					plus.nativeUI.alert('出错了')
				}

			}

			//返回顶部

			function totopIn() {
				var totopview = document.getElementById("totop")
				totopview.classList.remove('hide')
				totopview.classList.add('fadeInUp', 'animated')
				totopview.addEventListener('animationend', totopInCallBack)
			};

			function totopInCallBack() {
				var totopview = document.getElementById("totop")
				totopview.classList.remove('fadeOutDown', 'animated')
				totopview.removeEventListener('animationend', totopInCallBack)
			}

			function totopOut() {
				var totopview = document.getElementById("totop")
				totopview.classList.add('fadeOutDown', 'animated')
				totopview.addEventListener('animationend', totopOutCallBack)
			};

			function totopOutCallBack() {
				var totopview = document.getElementById("totop")
				totopview.classList.remove('fadeOutDown', 'animated')
				totopview.classList.add('hide')
				totopview.removeEventListener('animationend', totopOutCallBack)
			}

			var totop = false;
			var scrollTop = 0;
			window.onscroll = function() {
				scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (scrollTop > 1500 && !totop) {
					totop = true;
					totopIn()
				} else if (scrollTop < 500 && totop) {
					totop = false;
					totopOut()
				}
			}

			function scrolltotop() {
				window.scrollTo({
					top: 0,
					behavior: "smooth"
				})
			}

			//图片懒加载器
			var myLazyLoad = new LazyLoad({
				elements_selector: ".lazy"
			});
		</script>
	</body>

</html>
